$close-red:                     #ff6159;
$close-red-active:              #bf4942;
$close-red-icon:                #4d0000;
$close-red-icon-active:         #190000;

$minimize-yellow:               #ffbd2e;
$minimize-yellow-active:        #bf8e22;
$minimize-yellow-icon:          #995700;
$minimize-yellow-icon-active:   #592800;

$maximize-green:                #28c941;
$maximize-green-active:         #1d9730;
$maximize-green-icon:           #006500;
$maximize-green-icon-active:    #003200;

$disabled-gray: rgba(175, 175, 175, 0.5);

.traffic-lights {
    // position: absolute;
    //top: 1px;
    //left: 8px;

    .focus &, &:hover, &:active {
        > .traffic-light-close {
            background-color: $close-red;

            &:active:hover {
                background-color: $close-red-active;
            }
        }
        > .traffic-light-minimize {
            background-color: $minimize-yellow;

            &:active:hover {
                background-color: $minimize-yellow-active;
            }
        }
        > .traffic-light-maximize {
            background-color: $maximize-green;

            &:active:hover {
                background-color: $maximize-green-active;
            }
        }
    }

    > .traffic-light {
        &:before, &:after {
            visibility: hidden;
        }
    }

    &:hover, &:active {
        > .traffic-light {
            &:before, &:after {
                visibility: visible;
            }
        }
    }
}

.traffic-light {
    border-radius: 100%;
    padding: 0;
    height: 12px;
    width: 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
    margin-right: 3.5px;
    background-color: $disabled-gray;
    position: relative;
    outline: none;

    &:before, &:after {
        content: '';
        position: absolute;
        border-radius: 1px;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }

    &-close {
        &:before, &:after {
            background-color: $close-red-icon;
            width: 8px;
            height: 1px;
        }
        &:before {
            transform: rotate(45deg);// translate(-0.5px, -0.5px);
        }
        &:after {
            transform: rotate(-45deg);// translate(0.5px, -0.5px);
        }
        &:active:hover:before, &:active:hover:after {
            background-color: $close-red-icon-active;
        }
    }

    &-minimize {
        &:before {
            background-color: $minimize-yellow-icon;
            width: 8px;
            height: 1px;
            //transform: translateY(-0.5px);
        }
        &:active:hover:before {
            background-color: $minimize-yellow-icon-active;
        }
    }

    &-maximize {
        &:before {
            background-color: $maximize-green-icon;
            width: 6px;
            height: 6px;
        }
        &:after {
            background-color: $maximize-green;
            width: 10px;
            height: 2px;
            transform: rotate(45deg);
        }
        &:active:hover:before {
            background-color: $maximize-green-icon-active;
        }
        &:active:hover:after {
            background-color: $maximize-green-active;
        }
    }
}
